<!DOCTYPE html>
<html lang="zh" id="page">


<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>需求管理</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
	<link rel="icon" type="image/png"
		href="https://img1.baidu.com/it/u=3012006607,2742731699&fm=253&fmt=auto&app=138&f=PNG?w=420&h=420">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>

	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #ffffff;
			overflow-y: hidden;
		}



		.container {
			display: flex;
			justify-content: center;
			padding: 20px;

		}



		textarea {
			width: 100%;
			resize: none;


		}

		#new-requirement {
			resize: none;
			padding: 10px 10px 0px 10px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px rgba(196, 196, 196, 0.26);
			border: 1px solid #ffffff;
			width: 680px;
			position: fixed;
			top: 70px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}


		ul {
			list-style-type: none;
			padding: 0;
		}

		li {
			background-color: #ffffff;

			margin-bottom: 13px;
			/* 两个需求之间 */
			position: relative;

		}

		/* 需求和bug整体外边框 */
		#requirements-list>li {
			padding: 20px 20px 1px 20px;

			border-radius: 15px;
			box-shadow: 0 0px 5px rgba(179, 179, 179, 0.1);
		}

		.requirements {
			width: 700px;
			margin-top: 10px;
		}

		#requirements-list {
			height: calc(100vh - 120px - 70px + 25px);
			/* 页面高度减去margin-top和页面顶部预留空间 */
			overflow-y: auto;
			margin-top: 120px;
		}

		/* For WebKit (Safari, Chrome, etc.) */
		#requirements-list::-webkit-scrollbar {
			width: 8px;
			background-color: #F5F5F5;
		}

		#requirements-list::-webkit-scrollbar-thumb {
			background-color: #e0e0e0;
			border-radius: 10px;
		}

		#requirements-list::-webkit-scrollbar-thumb:hover {
			background-color: #666;
		}

		/* For Firefox */
		#requirements-list {
			scrollbar-width: thin;
			scrollbar-color: #999 #F5F5F5;
		}



		/* bug上下的间距 */
		li ul li {
			margin-top: 0px;
			border-radius: 5px;
		}

		button.new-bug-btn {
			cursor: pointer;
			position: absolute;
			right: 25px;
			top: 15px;
			border-radius: 7px;
			border: 1px solid #e2e2e2;
			background-color: #ffffff;
			color: #7a7a7a;
			padding: 4px 5px 4px 5px;
		}

		.copy-requirement {
			
			display: none;
		}

		.more-btn {
			cursor: pointer;
			width: 60px;
			position: absolute;
			right: -75px;
			top: 5px;
			border-radius: 7px;
			border: 1px solid #e2e2e2;
			background-color: #ffffff;
			color: #7a7a7a;
			padding: 3px 5px;

		}



		.status-select {
			position: absolute;
			right: 170px;
			top: 15px;
			border: 1px solid #e2e2e2;
			border-radius: 7px;
			padding: 2.5px 3px;

			cursor: pointer;
			background-color: #ffffff;
		}

		.status-select:focus {
			border: 1px solid #e2e2e2;
			outline: none;
		}


		/* Modal */
		.modal {
			display: none;
			position: fixed;
			z-index: 2;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.modal-content {
			background-color: #fefefe;
			margin: 15% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 50%;
			border-radius: 10px;
		}

		.close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
		}

		.close:hover,
		.close:focus {
			color: black;
			text-decoration: none;
			cursor: pointer;
		}

		/* 完成的bug颜色 */
		.completed {
			color: rgba(201, 201, 201, 0.397);
		}

		.edit-close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			/* 其他样式，例如颜色、字体大小等 */
		}

		.edit-close:hover,
		.edit-close:focus {
			color: black;
			text-decoration: none;
			cursor: pointer;
		}

		.toast {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #333;
			color: white;
			padding: 10px;
			border-radius: 5px;
			opacity: 0;
			transition: opacity 0.5s;
			z-index: 32;
		}

		.toast.active {
			opacity: 1;
		}


		/* 更多下拉 */
		.dropdown {
			position: absolute;
			display: inline-block;
			right: 171px;
			top: 10px;
		}

		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #ffffff;
			min-width: 105px;
			border-radius: 5px;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			z-index: 1;
			top: 28px;
			left: 5px;
			padding: 5px 0px 10px 0px;
		}

		.dropdown-content button {
			color: rgb(37, 37, 37);
			padding: 5px 0px 5px 10px;
			text-decoration: none;
			display: block;
			border: none;
			background-color: inherit;
			text-align: left;
			width: 100%;
			cursor: pointer;
			border-radius: 5px;
		}

		.dropdown-content button:hover {
			background-color: #f1f1f19c;
			color: rgb(41, 119, 236);
		}

		.dropdown:hover .dropdown-content {
			display: block;
		}



		.bullet-point {
			display: flex;

		}

		/* 圆点 */
		.bullet-point span {
			width: 10px;
			height: 9px;
			background-color: #3399FF;
			border-radius: 50%;
			margin-right: 8px;
			margin-top: 15px;
		}

		/* 需求 */
		.bullet-point>div {
			width: 100%;
			line-height: 1.5;
			color: #1b1b1b;

			margin-top: 7px;
			margin-bottom: 5px;
			/* 需求距离时间 */
		}

		.timestamp {
			color: rgb(209, 209, 209);
		}

		.bug-label {
			display: inline-block;
			background-color: #dfcfec54;
			padding: 2px 5px;
			margin-right: 5px;
			margin-left: 30px;
			color: #a871e7;
			border-radius: 5px;
		}


		.mark-as-completed {
			cursor: pointer;
			position: absolute;
			color: #a0d0ff;
			right: 150px;
			top: 0px;
			border: 1px solid #ffffff;
			background-color: #ffffff;
		}

		.mark-as-completed:hover {
			color: #3399FF;
		}

		.copy-bug {
			cursor: pointer;
			position: absolute;
			color: #a0d0ff;
			right: 80px;
			top: 0px;
			border: 1px solid #ffffff;
			background-color: #ffffff;
		}

		.copy-bug:hover {
			color: #3399FF;
		}

		.delete-bug {
			cursor: pointer;
			position: absolute;
			color: #a0d0ff;
			right: 5px;
			top: 0px;
			border: 1px solid #ffffff;
			background-color: #ffffff;
		}

		.delete-bug:hover {
			color: #3399FF;
		}

		.bug-text {
			display: inline-block;
			max-width: 55%;
			vertical-align: top;
			white-space: normal;
			overflow-wrap: break-word;

		}

		.edit-modal {
			display: none;
			position: fixed;
			z-index: 2;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.4);

		}

		.edit-modal-content {
			background-color: #fefefe;
			margin: 15% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 50%;
			border-radius: 10px;
		}

		.green-background {
			position: absolute;
			top: 50px;
			left: 50%;
			transform: translateX(-50%);
			width: 780px;
			background-color: #FAFBFD;
			border-radius: 35px 35px 0px 0px;
			bottom: 0px;
			z-index: -1;

		}

		.green-background2 {
			position: absolute;
			top: 5px;
			height: 100px;
			left: 50%;
			transform: translateX(-50%);
			width: 778px;
			background-color: #fafbfd00;
			border-radius: 20px 20px 0px 0px;

			border: 1px solid #eeeeee;
			z-index: -2;

		}





		.title {
			position: fixed;
			top: 10px;
			color: #2e2e2e;
			padding: 3px 5px;
			margin-left: -300px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			font-size: 18px;

		}





		.logs-btn {
			position: fixed;
			top: 20px;
			color: #ffffff;
			padding: 3px 5px;
			margin-left: 310px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			background-color: #3399ffcb;
			border-radius: 5px;
			border: 1px solid #ffffff;
			cursor: pointer;
		}

		.logs-btn:hover {
			background-color: #47a1fa;
		}

		/* 添加一个新样式，用于已完成需求按钮 */
		.completed-requirements-btn {
			position: fixed;
			top: 20px;
			color: #ffffff;
			padding: 3px 5px;
			margin-left: 210px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			background-color: #8ea0f173;
			border-radius: 5px;
			border: 1px solid #ffffff;
			cursor: pointer;
		}

		.developer-management-btn {
			position: fixed;
			top: 20px;
			color: #ffffff;
			padding: 4px 5px 2px 5px;
			margin-left: 105px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			background-color: #8ea0f173;
			border-radius: 5px;
			border: 1px solid #ffffff;
			cursor: pointer;
		}

		#requirement-count {
			position: fixed;
			top: 18px;
			color: #2e2e2e;
			padding: 3px 6px;
			margin-left: 35px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			font-size: 14px;

		}

		#status-management-btn {
			position: fixed;
			top: 20px;
			color: #ffffff;
			padding: 4px 5px 2px 5px;
			margin-left: 145px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			background-color: #8ea0f173;
			border-radius: 5px;
			border: 1px solid #ffffff;
			cursor: pointer;
		}



		.logs-sidebar {
			position: fixed;
			top: 0;
			left: -353px;
			width: 350px;
			height: 100%;
			background-color: #fcfcfc;
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
			overflow-y: auto;
			transition: left 0.3s;
			z-index: 999;
			border-radius: 0px 10px 0px 0px;
			border: 1px solid #ffffff;
		}

		/* For WebKit (Safari, Chrome, etc.) */
		#logs-sidebar::-webkit-scrollbar {
			width: 8px;
			background-color: #F5F5F5;
		}

		#logs-sidebar::-webkit-scrollbar-thumb {
			background-color: #e0e0e0;
			border-radius: 10px;
		}

		#logs-sidebar::-webkit-scrollbar-thumb:hover {
			background-color: #666;
		}

		/* For Firefox */
		#logs-sidebar {
			scrollbar-width: thin;
			scrollbar-color: #999 #F5F5F5;
		}

		.logs-sidebar-content {
			padding: 16px;
			font-size: 14px;



		}

		#new-log {
			width: 100%;
			padding: 8px;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 10px;
			border: 1px solid #ffffff;
			box-shadow: 0 0 8px rgba(218, 218, 218, 0.3);

		}

		#save-log {
			width: 100%;
			padding: 8px;
			background-color: #8ea0f173;
			color: white;
			border: none;
			cursor: pointer;
			margin-top: 8px;
			border-radius: 5px;
		}

		#save-log:hover {
			background-color: #8ea0f1f3;
		}

		#logs-list {
			list-style-type: none;
			padding: 0;
			margin-top: 20px;

		}

		#logs-list li {
			padding: 8px;
			border-radius: 10px;
			word-wrap: break-word;
			box-shadow: 0px 0px 10px rgba(218, 218, 218, 0.185);
			margin-bottom: 20px;
		}

		#logs-list li:last-child {
			border-bottom: none;
		}

		.title-sidebar {
			position: absolute;
			color: #424242;
			font-size: 16px;
			margin-top: -5px;
		}

		.close-sidebar {

			margin-top: -10px;
			margin-bottom: 8px;
			margin-left: 290px;
			font-size: 25px;
			background-color: #ffffff00;
			border: none;
			cursor: pointer;
			color: #636363;

		}

		.close-sidebar:hover {
			color: #444;
		}

		.edit-area {
			color: #313131;
		}

		.copyBtn-day {
			margin-left: 20px;
			color: #3399FF;
			background-color: #ffffff00;
			border: none;
			cursor: pointer;
		}

		.deleteBtn-day {
			margin-left: 10px;
			color: #8bc3fc;
			border: none;
			background-color: #ffffff00;
			cursor: pointer;
		}

		.timestamp-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 15px;
			font-weight: bold;
			color: #3f3f3f;
			margin-bottom: 6px;

		}





		/* 管理状态弹窗 */
		#manage-status-modal {
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1000;
		}

		#manage-status-modal .modal-content {
			background-color: #ffffff;
			margin: 15% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 30%;
			border-radius: 5px;
		}

		/* 状态选项列表 */
		#status-options-list {
			margin-bottom: 20px;
		}

		/* 添加状态按钮样式 */
		#add-status-option {
			background-color: #81acec;
			border: none;
			color: white;
			padding: 5px 10px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 14px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 5px;
			margin-left: 0px;
		}

		/* 状态选项样式 */
		.status-option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10px;
		}

		.status-option span {
			margin-right: 5px;
		}

		#copy-toast1 {
			display: none;
			position: fixed;
			bottom: 10px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #333;
			color: #fff;
			padding: 8px 16px;
			border-radius: 4px;
			z-index: 2;
		}

		.color-picker {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 1px solid #e2e2e2;
			cursor: pointer;
			display: inline-block;
			margin-left: 10px;
		}





		.developer-select:focus {
			border: 1px solid #e2e2e2;
			outline: none;
		}

		.developer-checkbox {
			display: inline-block;
		}


		.developer-select-btn {
			text-align: center;
			text-decoration: none;
			display: inline-block;
			cursor: pointer;
			position: absolute;
			right: 290px;
			top: 15px;
			border-radius: 7px;
			border: 1px solid#ebebeb;
			background-color: #ffffff;
			color: #acacac;
			padding: 3px 5px;
		}

		.developer-select-popup {
			display: none;
			position: absolute;
			background-color: white;
			min-width: 50px;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			z-index: 1;
			padding: 5px;
			border-radius: 5px;
			right: 290px;
			top: 42px;
		}

		.developer-select-popup label {
			display: block;
			padding: 2px 4px 2px 2px;
			cursor: pointer;
			margin-bottom: -10px;
		}

		.developer-select-confirm {
			background-color: #63b0fd;
			border: none;
			color: white;
			padding: 6px 12px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 14px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 5px;
		}

		.priority-select {
			position: absolute;
			top: 19px;
			left: 160px;
			background-color: #fff;
			border: 1px solid #e8f5ff;
			padding: 0px 1px 0px 3px;
			font-size: 10px;
			cursor: pointer;
			border-radius: 7px 0px 7px 7px;
			height: 17px;
			width: 17px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.priority-select-popup {
			display: none;
			position: absolute;
			top: 40px;
			left: 165px;
			background-color: #fff;
			border: 1px solid #f0f0f0;
			padding: 8px 11px 8px 5px;
			font-size: 14px;
			border-radius: 5px;
			z-index: 1;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		}

		/* 计时 */
		.start-timer-btn {
			left: 185px;
			top: 16px;

			text-align: center;
			text-decoration: none;
			display: none;
			cursor: pointer;
			position: absolute;

			border-radius: 7px;
			border: 1px solid#ffffff00;
			background-color: #ffffffe1;
			color: #acacac;
			padding: 3px 5px;
		}

		.start-timer-btn:hover {
			background-color: #ffffff;
			color: #3a78ec;

		}

		/* 时间 */
		.timer-text {

			font-family: 'Times New Roman', Times, serif;
			
			
			color: #acacac;

		}

		/* 重新开始 */
		.reset-timer-btn {

			margin-left: 43px;
			border-radius: 7px;
			border: 1px solid#c0c0c000;
			background-color: #ffffff;
			color: #acacac;
			padding: 2px 5px;
			cursor: pointer;
		}
		.reset-timer-btn:hover {
			background-color: #ffffff;
			color: #3a78ec;

		}

		.icon {
			border: 1px solid#ebebeb00;
		}

		.hour-box {
  color: rgb(255, 255, 255);
  background-color: #5e5e5e;
  border: 1px solid #ccc;
  padding: 2px 3px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  margin-left: 20px;
}
.minutes-box {
  color: rgb(255, 255, 255);
  background-color: #5e5e5e;
  border: 1px solid #ccc;
  padding: 2px 3px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
}
.seconds-box {
  color: rgb(255, 255, 255);
  background-color: #5e5e5e;
  border: 1px solid #ccc;
  padding: 2px 3px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
}
.progress-bar {
  width: 0;
  height: 5px;

  background-color: #0b6464;
  transition: width 1s linear;

  margin-left: 21px;
  margin-bottom: 2px;
  margin-top: 5px;
  position: relative;
  border-radius: 2.5px;
  background: linear-gradient(to left, rgb(80, 194, 240), rgb(10, 140, 201), rgb(134, 223, 245), rgb(10, 135, 207), rgb(85, 148, 243), rgb(124, 190, 252), rgb(20, 139, 236));
  background-size: 1000% 100%;
  animation: flow 5s linear infinite;
}

@keyframes flow {
  0% {
    background-position: 100% 0%;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.342);

  }
  100% {
    background-position: 0% 0%;
  }
}

	
	</style>

</head>

<body>
	<div id="copy-toast1"></div>
	<div id="requirement-count"><i class="fab fa-evernote" style="color: #0b6464;"></i> Total：<span>0</span></div>
	<div class="title">Demand Manage</div>
	<div class="green-background"></div>
	<div class="green-background2"></div>
	<div class="container">
		<div class="requirements">

			<textarea id="new-requirement" oninput="autoResizeTextarea(this)" placeholder="按Enter键提交需求，Shift+Enter换行"
				rows="1"></textarea>

			<ul id="requirements-list"></ul>
		</div>
		<div id="bug-modal" class="modal">
			<div class="modal-content">
				<span class="close">&times;</span>
				<h3>新建Bug</h3>
				<textarea id="new-bug" placeholder="请输入Bug描述" rows="15"></textarea>
				<button id="submit-bug">确定</button>
			</div>
		</div>
	</div>
	<div class="toast" id="copy-toast">复制成功</div>
	<!-- 添加已完成需求按钮 -->
	<button class="completed-requirements-btn">Completed</button>

	<!-- 添加已完成需求列表的模态框 -->
	<div id="completed-requirements-modal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<h3>已完成需求列表</h3>
			<ul id="completed-requirements-list"></ul>
		</div>
	</div>
	<!-- 编辑需求 -->
	<div id="edit-modal" class="edit-modal">
		<div class="edit-modal-content">
			<span class="edit-close">&times;</span>
			<h3>编辑需求</h3>
			<textarea id="edit-requirement" rows="15"></textarea>
			<button id="save-requirement">保存</button>
		</div>
	</div>
	<!-- 编辑bug -->
	<div id="edit-bug-modal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<h3>编辑Bug</h3>
			<textarea id="edit-bug" placeholder="请输入Bug描述" rows="15"></textarea>
			<button id="save-edited-bug">保存</button>
		</div>
	</div>

	<button id="open-logs-sidebar" class="logs-btn">Daily Record</button>
	<div id="logs-sidebar" class="logs-sidebar">
		<div class="logs-sidebar-content">
			<div id="title-sidebar" class="title-sidebar">Daily Record</div>
			<button class="close-sidebar" id="close-sidebar" onclick="closeLogsSidebar();">
				<i class="fas fa-times-circle"></i></button>

			<textarea id="new-log" rows="7" placeholder="请输入……


今日完成:


明日待办:"></textarea>
			<button id="save-log">保存</button>
			<ul id="logs-list"></ul>
		</div>
	</div>

	<button class="status-management-btn" id="status-management-btn"><i class="fas fa-cog"></i></button>

	<div id="status-management-modal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<h3>管理状态</h3>
			<button id="add-status-option">添加状态</button>
			<ul id="status-options-list">
				<!-- 这里将用于显示状态选项 -->
			</ul>

		</div>
	</div>

	<button class="developer-management-btn" id="developer-management-btn"> <i class="fas fa-user-cog"></i> </button>

	<div id="developer-management-modal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<h3>管理开发人员</h3>
			<button id="add-developer-option">添加开发人员</button>
			<ul id="developer-options-list">
				<!-- 这里将用于显示开发人员选项 -->
			</ul>
		</div>
	</div>

	<script>

		$(document).ready(function () {
			
			const localStorageKey = "requirements_and_bugs";
			let requirements = JSON.parse(localStorage.getItem(localStorageKey)) || [];
			const completedLocalStorageKey = "completed_requirements_and_bugs";
			let completedRequirements = JSON.parse(localStorage.getItem(completedLocalStorageKey)) || [];











			// 添加新函数，用于渲染已完成需求列表
			function renderCompletedRequirements() {
				$("#completed-requirements-list").empty();

				completedRequirements.forEach((req, index) => {
					let listItem = `<li><div>${req.timestamp}</div><div>${req.content}</div><ul>`;

					req.bugs.forEach((bug, bugIndex) => {
						listItem += `<li><span class="${bug.completed ? 'completed' : ''}">${bug.content}</span></li>`;
					});
					listItem += `</ul></li>`;
					$("#completed-requirements-list").append(listItem);
				});

			}




			// 编辑需求
			function showEditModal(reqId) {
				const requirementContent = requirements[reqId].content.replace(/<br>/g, "\n");
				$("#edit-requirement").val(requirementContent);
				$("#edit-modal").data("req-id", reqId).show();
			}


			function hideEditModal() {
				$("#edit-modal").hide();
				$("#edit-requirement").val("");
			}

			// Close edit-modal when clicking outside of the modal-content
			$("#edit-modal").on("click", function (event) {
				if ($(event.target).hasClass("modal")) {
					hideEditModal();
				}
			});

			// Show edit modal when double clicking on requirement
			$("body").on("dblclick", ".bullet-point > div", function () {
				const reqId = $(this).parent().siblings(".copy-requirement").data("req-id");
				showEditModal(reqId);
			});

			// Save edited requirement
			$("#save-requirement").on("click", function () {
				const reqId = $("#edit-modal").data("req-id");
				const editedRequirement = $("#edit-requirement").val().trim().replace(/\n/g, "<br>");
				if (editedRequirement !== "") {
					requirements[reqId].content = editedRequirement;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
					hideEditModal();
				}
			});

			// Close edit modal
			$(".edit-close").on("click", hideEditModal);

			// 编辑bug
			$("body").on("dblclick", ".bug-text", function () {
				const reqId = $(this).siblings(".mark-as-completed").data("req-id");
				const bugId = $(this).siblings(".mark-as-completed").data("bug-id");
				const bugContent = requirements[reqId].bugs[bugId].content;
				$("#edit-bug").val(bugContent);
				$("#edit-bug-modal").data("req-id", reqId).data("bug-id", bugId).show();
			});
			$("#save-edited-bug").on("click", function () {
				const reqId = $("#edit-bug-modal").data("req-id");
				const bugId = $("#edit-bug-modal").data("bug-id");
				const editedBug = $("#edit-bug").val().trim().replace(/\n/g, "<br>");
				if (editedBug !== "") {
					requirements[reqId].bugs[bugId].content = editedBug;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
					$("#edit-bug-modal").hide();
					$("#edit-bug").val("");
				}
			});
			$("#edit-bug-modal").on("click", function (event) {
				if ($(event.target).hasClass("modal")) {
					$("#edit-bug-modal").hide();
					$("#edit-bug").val("");
				}
			});
			function showEditBugModal(reqId, bugId) {
				const bugContent = requirements[reqId].bugs[bugId].content;
				$("#edit-bug").val(bugContent);
				$("#edit-bug-modal").data("req-id", reqId).data("bug-id", bugId).show();
			}

			function hideEditBugModal() {
				$("#edit-bug-modal").hide();
				$("#edit-bug").val("");
			}
			$("body").on("dblclick", ".bug-text", function () {
				const reqId = $(this).siblings(".mark-as-completed").data("req-id");
				const bugId = $(this).siblings(".mark-as-completed").data("bug-id");
				showEditBugModal(reqId, bugId);
			});
			$("#save-edit-bug").on("click", function () {
				const reqId = $("#edit-bug-modal").data("req-id");
				const bugId = $("#edit-bug-modal").data("bug-id");
				const editedBug = $("#edit-bug").val().trim();
				if (editedBug !== "") {
					requirements[reqId].bugs[bugId].content = editedBug;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
					hideEditBugModal();
				}
			});
			$(".close").on("click", function () {
				if ($(this).parent().parent().attr("id") === "edit-bug-modal") {
					hideEditBugModal();
				} else {
					hideModal();
				}
			});




			// 添加新函数，用于弹出已完成需求列表的窗口
			function showCompletedRequirementsModal() {
				$("#completed-requirements-modal").show();
			}

			function hideCompletedRequirementsModal() {
				$("#completed-requirements-modal").hide();
			}








			const developerLocalStorageKey = "developer_options";
			let developerOptions = JSON.parse(localStorage.getItem(developerLocalStorageKey)) || [];

			function renderDeveloperOptions() {
				$("#developer-options-list").empty();
				developerOptions.forEach((developerOption, index) => {
					let listItem = `<li>
        <span>${developerOption}</span>
        <button class="delete-developer-option" data-developer-index="${index}">删除</button>
        <button class="edit-developer-option" data-developer-index="${index}">编辑</button>
        <button class="move-up-developer-option" data-developer-index="${index}">上移</button>
        <button class="move-down-developer-option" data-developer-index="${index}">下移</button>
    </li>`;
					$("#developer-options-list").append(listItem);
				});
			}

			function updateDeveloperSelectOptions() {
				$(".developer-select").each(function () {
					const currentValue = $(this).val();
					$(this).empty();
					developerOptions.forEach((developerOption) => {
						const isSelected = currentValue === developerOption;
						$(this).append(`<option value="${developerOption}" ${isSelected ? "selected" : ""}>${developerOption}</option>`);
					});
				});
			}

			$("#developer-management-btn").on("click", function () {
				renderDeveloperOptions();
				$("#developer-management-modal").show();
			});

			$("#add-developer-option").on("click", function () {
				const newDeveloperOption = prompt("请输入新的开发人员：");
				if (newDeveloperOption) {
					developerOptions.push(newDeveloperOption);
					localStorage.setItem(developerLocalStorageKey, JSON.stringify(developerOptions));
					renderDeveloperOptions();
					updateDeveloperSelectOptions();
				}
			});

			$("body").on("click", ".delete-developer-option", function () {
				const developerIndex = $(this).data("developer-index");
				developerOptions.splice(developerIndex, 1);
				localStorage.setItem(developerLocalStorageKey, JSON.stringify(developerOptions));
				renderDeveloperOptions();
				updateDeveloperSelectOptions();
			});

			$("body").on("click", ".edit-developer-option", function () {
				const developerIndex = $(this).data("developer-index");
				const newDeveloperOption = prompt("请输入新的开发人员：", developerOptions[developerIndex]);
				if (newDeveloperOption) {
					developerOptions[developerIndex] = newDeveloperOption;
					localStorage.setItem(developerLocalStorageKey, JSON.stringify(developerOptions));
					renderDeveloperOptions();
					updateDeveloperSelectOptions();
				}
			});

			$("body").on("click", ".move-up-developer-option", function () {
				const developerIndex = $(this).data("developer-index");
				if (developerIndex > 0) {
					const temp = developerOptions[developerIndex];
					developerOptions[developerIndex] = developerOptions[developerIndex - 1];
					developerOptions[developerIndex - 1] = temp;
					localStorage.setItem(developerLocalStorageKey, JSON.stringify(developerOptions));
					renderDeveloperOptions();
					updateDeveloperSelectOptions();
				}
			});

			$("body").on("click", ".move-down-developer-option", function () {
				const developerIndex = $(this).data("developer-index");
				if (developerIndex < developerOptions.length - 1) {
					const temp = developerOptions[developerIndex];
					developerOptions[developerIndex] = developerOptions[developerIndex + 1];
					developerOptions[developerIndex + 1] = temp;
					localStorage.setItem(developerLocalStorageKey, JSON.stringify(developerOptions));
					renderDeveloperOptions();
					updateDeveloperSelectOptions();
				}
			});

			$(".close").on("click", function () {
				$("#developer-management-modal").hide();
			});
			renderDeveloperOptions();
			updateDeveloperSelectOptions();






			// 状态的设置
			const statusLocalStorageKey = "status_options";
			let statusOptions = JSON.parse(localStorage.getItem(statusLocalStorageKey)) || [
				{ name: "未开始", color: "#7a7a7a" },
				{ name: "需求分析中", color: "#7a7a7a" },
				{ name: "需求待确定", color: "#7a7a7a" },
				{ name: "待讨论", color: "#7a7a7a" },
				{ name: "等UI图", color: "#7a7a7a" },
				{ name: "待开发", color: "#7a7a7a" },
				{ name: "开发中", color: "#7a7a7a" },
				{ name: "test待测试", color: "#7a7a7a" },
				{ name: "test测试中", color: "#7a7a7a" },
				{ name: "test改bug中", color: "#7a7a7a" },
				{ name: "待升Prod", color: "#7a7a7a" },
				{ name: "Prod测试中", color: "#7a7a7a" },
				{ name: "Prod已验收", color: "#7a7a7a" },
				{ name: "Prod改bug中", color: "#7a7a7a" },
				{ name: "已完成", color: "#7a7a7a" },
				{ name: "已取消", color: "#7a7a7a" },
			];

			// 状态的设置
			function renderStatusOptions() {
				$("#status-options-list").empty();
				statusOptions.forEach((statusOption, index) => {
					let listItem = `<li>
            <span>${statusOption.name}</span>
	  <button class="edit-status-option" data-status-index="${index}">编辑</button>
      <button class="delete-status-option" data-status-index="${index}">删除</button>
	  <button class="move-up-status-option" data-status-index="${index}">向上</button>
  <button class="move-down-status-option" data-status-index="${index}">向下</button>
  <input type="color" class="color-picker" value="${statusOption.color}" data-status-index="${index}" />
</li>`;
					$("#status-options-list").append(listItem);
				});
			}

			$("#status-management-btn").on("click", function () {
				renderStatusOptions();
				$("#status-management-modal").show();
			});

			$("#add-status-option").on("click", function () {
				const newStatusOption = prompt("请输入新的状态：");
				if (newStatusOption) {
					statusOptions.push({ name: newStatusOption, color: "#000000" });
					localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
					renderStatusOptions();
					updateStatusSelectOptions();
				}
			});

			$("body").on("click", ".edit-status-option", function () {
				const statusIndex = $(this).data("status-index");
				const editedStatusOption = prompt("编辑状态：", statusOptions[statusIndex].name);

				if (editedStatusOption) {
					statusOptions[statusIndex].name = editedStatusOption;
					localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
					renderStatusOptions();
					updateStatusSelectOptions();

				}
			});

			$("body").on("click", ".delete-status-option", function () {
				const statusIndex = $(this).data("status-index");
				statusOptions.splice(statusIndex, 1);
				localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
				renderStatusOptions();
				updateStatusSelectOptions();
			});

			$("body").on("click", ".move-up-status-option", function () {
				const statusIndex = $(this).data("status-index");
				if (statusIndex > 0) {
					const tempStatus = statusOptions[statusIndex - 1];
					statusOptions[statusIndex - 1] = statusOptions[statusIndex];
					statusOptions[statusIndex] = tempStatus;
					localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
					renderStatusOptions();
					updateStatusSelectOptions();
				}
			});

			$("body").on("click", ".move-down-status-option", function () {
				const statusIndex = $(this).data("status-index");
				if (statusIndex < statusOptions.length - 1) {
					const tempStatus = statusOptions[statusIndex + 1];
					statusOptions[statusIndex + 1] = statusOptions[statusIndex];
					statusOptions[statusIndex] = tempStatus;
					localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
					renderStatusOptions();
					updateStatusSelectOptions();
				}
			});


			$(".close").on("click", function () {
				$("#status-management-modal").hide();
			});

			function updateStatusSelectOptions() {
				$(".status-select").each(function () {
					const currentValue = $(this).val();
					$(this).empty();
					statusOptions.forEach((statusOption) => {
						const isSelected = currentValue === statusOption.name;
						$(this).append(`<option value="${statusOption.name}" ${isSelected ? "selected" : ""}>${statusOption.name}</option>`);
						if (isSelected) {
							$(this).css({
								"color": statusOption.color,
								"border-color": statusOption.color
							});
						}
					});
				}); updateDeveloperSelectOptions(); // 添加调用
			}

			renderStatusOptions();
			updateStatusSelectOptions();

				// 拖动
			// 当重新排序列表后，使用localStorage保存更新后的顺序
			$("#requirements-list").sortable({
  axis: "y",
  cursor: "move",
  helper: 'clone',
  update: function (event, ui) {
    let newOrder = $(this).sortable("toArray");
    let reorderedRequirements = new Array(requirements.length);

    newOrder.forEach((id, index) => {
      const reqId = parseInt(id.slice(1));
      reorderedRequirements[index] = requirements[reqId];
    });

    requirements = reorderedRequirements;
    localStorage.setItem(localStorageKey, JSON.stringify(requirements));
  }
}).disableSelection();




			// 渲染需求列表
			function renderRequirements() {

				$("#requirements-list").empty();
				// Update the requirement count
				$("#requirement-count span").text(requirements.length);

				requirements.forEach((req, index) => {
					let selectedDevelopers = req.developers ? req.developers : '';
					
					const timerRunning = timers.hasOwnProperty(index);
					const timerIsZero = req.timerData === "" || req.timerData === "00:00:00";
					
					const timerDisplay = timerIsZero && !timerRunning ? "none" : "inline";

					const progressBarWidth = req.progressBarWidth || 0; // 从需求中获取进度条宽度数据

					let priorityColor = getPriorityColor(req.priority);
					// 在这里添加优先级选择按钮和下拉菜单
					let prioritySelect = `<div class="priority-select" data-req-id="${index}" style="color:${priorityColor}">${req.priority || 'P2'}</div>`;

					let listItem = `<li id="r${index}">

                        <div class="timestamp">${req.timestamp}</div>
                     <div class="bullet-point">
                    <span></span>
                      <div>${req.content}</div>
                    </div>

					
					<button class="start-timer-btn" data-req-id="${index}" style="display: ${timerDisplay};">
    <i class="far fa-clock"></i>${req.timerData ? " 继续" : ""}
  </button>
  <span class="timer-text">${formatTimerText(req.timerData)}</span>

  <button class="reset-timer-btn" data-req-id="${index}" style="display: ${req.timerData ? 'inline' : 'none'}">
    <i class="fas fa-history"></i> clear
  </button>



  <select class="status-select " data-req-id="${index}">
                      ${statusOptions.map(option => `<option value="${option.name}"${option.name === req.status ? ' selected' : ''}>${option.name}</option>`).join('')}

</select>

<div class="progress-bar" data-req-id="${index}" style="width: ${progressBarWidth}px"></div>

<button class="developer-select-btn" data-req-id="${index}">${selectedDevelopers || ' - - '} <i class="fas fa-angle-down"></i></button>

<div class="developer-select-popup" data-req-id="${index}">
	
    ${developerOptions.map(option => `<label><input class="developer-checkbox" type="checkbox" value="${option}">${option}</label><br>`).join('')}
    <button class="developer-select-confirm" data-req-id="${index}">确定</button>
</div>





${prioritySelect}
<div class="priority-select-popup" data-req-id="${index}" style="display:none">
    <label><input class="priority-radio" type="radio" name="priority${index}" value="P1"${req.priority === 'P1' ? ' checked' : ''}>P1</label><br>
    <label><input class="priority-radio" type="radio" name="priority${index}" value="P2"${req.priority === 'P2' ? ' checked' : ''}>P2</label><br>
    <label><input class="priority-radio" type="radio" name="priority${index}" value="P3"${req.priority === 'P3' ? ' checked' : ''}>P3</label><br>
</div>



                        <div class="dropdown">
                            <button class="more-btn">操作 <i class="fas fa-caret-down"></i></button>
                            <div class="dropdown-content">
                                <button class="complete-requirement" data-req-id="${index}"><i class="far fa-check-square"></i> 完成需求</button>
								<button class="copy-requirement" data-req-id="${index}"><i class="far fa-copy"></i> 复制</button>
                                <button class="generate-image-btn1" data-req-id="${index}"><i class="fas fa-images"></i> 导出图片</button>
								<button class="delete-requirement-dropdown" data-req-id="${index}"><i class="fas fa-trash-alt"></i> 删除需求</button>
								<button class="move-up-requirement" data-req-id="${index}"><i class="fas fa-arrow-up"></i> 上移</button>
								<button class="move-down-requirement" data-req-id="${index}"><i class="fas fa-arrow-down"></i> 下移</button>

                        <button class="pin-requirement" data-req-id="${index}"><i class="fas fa-long-arrow-alt-down"></i> 置底</button>
						<button class="unpin-requirement" data-req-id="${index}"><i class="fas fa-long-arrow-alt-up"></i> 置顶</button>
						</div>
						
                        </div>

                        <button class="copy-requirement" data-req-id="${index}"><i class="far fa-copy"></i> 复制</button>
                        <button class="new-bug-btn" data-req-id="${index}"><i class="fas fa-plus"></i> Bug</button><ul>`;



					req.bugs.forEach((bug, bugIndex) => {
						listItem += `<li>
                        <span class="bug-label">Bug</span>
                        <span class="${bug.completed ? 'completed' : ''} bug-text">${bug.content}</span>

                            <button class="mark-as-completed" data-req-id="${index}" data-bug-id="${bugIndex}"><i class="far fa-check-square"></i> 修复</button>
                            <button class="copy-bug" data-req-id="${index}" data-bug-id="${bugIndex}"><i class="far fa-copy"></i> 复制</button>
                            <button class="delete-bug" data-req-id="${index}" data-bug-id="${bugIndex}"><i class="far fa-trash-alt"></i> 删除</button></li>`;
					});
					listItem += `</ul></li>`;
					$("#requirements-list").append(listItem);

				});
				$("body").on("change", ".status-select", function () {
					const reqId = $(this).data("req-id");
					const newStatus = $(this).val();
					requirements[reqId].status = newStatus;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					const statusOption = statusOptions.find(option => option.name === newStatus);
					if (statusOption) {
						$(this).css({
							"color": statusOption.color,
							"border-color": statusOption.color
						});
					}
				});
			}
			function showToast(message) {
				$("#copy-toast1").text(message).fadeIn(300).delay(1000).fadeOut(300);
			}

			$("body").on("click", ".generate-image-btn1", async function () {
				const reqId = $(this).data("req-id");
				const listItem = $(`[data-req-id='${reqId}']`).closest("li");
				html2canvas(listItem[0], { scale: 2, useCORS: true, allowTaint: true }).then(async (canvas) => {
					const imgData = canvas.toDataURL("image/png");
					const imgBlob = await (await fetch(imgData)).blob();

					try {
						if (navigator.clipboard && navigator.clipboard.write) {
							const clipboardItem = new ClipboardItem({ 'image/png': imgBlob });
							await navigator.clipboard.write([clipboardItem]);
							showToast("请粘贴图片…");
						} else {
							const imgUrl = URL.createObjectURL(imgBlob);
							const dummyLink = document.createElement('a');
							dummyLink.href = imgUrl;
							dummyLink.download = 'image.png';
							dummyLink.click();
							URL.revokeObjectURL(imgUrl);
							showToast("图片已生成并下载");
						}
					} catch (err) {
						console.error(err);
						showToast("无法将图片复制到剪贴板。请尝试其他方法。");
					}
				}).catch((err) => {
					console.error(err);
					showToast("生成图片时发生错误。请尝试其他方法。");
				});
				renderRequirements();
				updateStatusSelectOptions();

			});



			// 当鼠标进入 "new-requirement" 元素时，显示 "start-timer-btn" 按钮
			// 当鼠标离开 "new-requirement" 元素时，隐藏 "start-timer-btn" 按钮
			$("body").on("mouseenter", "li", function () {
				$(this).find(".start-timer-btn").show();
			});

			$("body").on("mouseleave", "li", function () {
				const timerText = $(this).find(".timer-text").text();
				if (timerText === "") {
					$(this).find(".start-timer-btn").hide();
				}
			});
			function formatTimerText(timerData) {
  if (!timerData) return '';
  const timeParts = timerData.split(':');
  const hoursString = `<span class="hour-box">${timeParts[0]}</span>`;
  const minutesString = `<span class="minutes-box">${timeParts[1]}</span>`;
  const secondsString = `<span class="seconds-box">${timeParts[2]}</span>`;
  return `${hoursString} : ${minutesString} : ${secondsString}`;
}

			// 存储计时器的对象
			const timers = {};

			// 在点击“开始计时”按钮时调用此函数
			$("body").on("click", ".start-timer-btn", function () {
				const reqId = $(this).data("req-id");
				const timerSpan = $(this).siblings("span");

				if (timers[reqId]) {
					// 如果已经有计时器在运行，则暂停计时器
					clearInterval(timers[reqId]);
					delete timers[reqId];
					$(this).html('<span class="icon"><i class="fa fa-play"></i></span> 继续');


					// 保存计时器数据到需求中
					requirements[reqId].timerData = timerSpan.text();
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));

					// 将进度条宽度数据保存到需求中
requirements[reqId].progressBarWidth = progressBarWidth;
  localStorage.setItem(localStorageKey, JSON.stringify(requirements));

				} else {
					// 如果没有计时器在运行，则开始计时
					const startTime = new Date().getTime();
					localStorage.setItem("timer_start_time", startTime);

					// 如果存在先前的计时器数据，则从先前的计时器数据开始计时
					const previousTimeData = requirements[reqId].timerData;
					let previousTime = 0;
					if (previousTimeData) {
						const timeParts = previousTimeData.split(':');
						previousTime = (parseInt(timeParts[0]) * 3600 + parseInt(timeParts[1]) * 60 + parseInt(timeParts[2])) * 1000;
					}

					localStorage.setItem("timer_previous_time", previousTime);

					timers[reqId] = setInterval(() => {
						const currentTime = new Date().getTime();
						const timeDiff = currentTime - startTime + previousTime;
						const seconds = Math.floor(timeDiff / 1000) % 60;
						const minutes = Math.floor(timeDiff / 1000 / 60) % 60;
						const hours = Math.floor(timeDiff / 1000 / 60 / 60);

						const hoursString = `<span class="hour-box">${hours.toString().padStart(2, "0")}</span>`;

						const minutesString = `<span class="minutes-box">${minutes.toString().padStart(2, "0")}</span>`;

						const secondsString = `<span class="seconds-box">${seconds.toString().padStart(2, "0")}</span>`;
						
						const progressBar = $(`.progress-bar[data-req-id="${reqId}"]`);
  const progressBarWidth = progressBar.parent().width() * (timeDiff / 1000 / 3600); // 按照题目要求计算宽度
  progressBar.css("width", `${Math.min(progressBarWidth, progressBar.parent().width())}px`);

  

  // 将进度条宽度数据保存到需求中
  requirements[reqId].progressBarWidth = progressBarWidth;
  localStorage.setItem(localStorageKey, JSON.stringify(requirements));

  // 检查进度条是否已满
if (progressBarWidth >= progressBar.parent().width()) {
    // 触发点击“reset-timer-btn”按钮的事件
    $(`.reset-timer-btn[data-req-id="${reqId}"]`).trigger("click");
    // 启动计时器
    $(`.start-timer-btn[data-req-id="${reqId}"]`).trigger("click");
  }

						
						const timeString = `${hoursString} : ${minutesString} : ${secondsString}`;
						timerSpan.html(timeString);
// 将计时器数据保存到需求中
requirements[reqId].timerData = timerSpan.text();
  localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					}, 1000);
					// 将计时器数据保存到需求中
requirements[reqId].timerData = timerSpan.text();
  localStorage.setItem(localStorageKey, JSON.stringify(requirements));

					$(this).html('<span class="icon"><i class="far fa-stop-circle"></i></span> 暂停');
					// 显示“reset-timer-btn”按钮
					$(this).siblings(".reset-timer-btn").css("display", "inline");
				}
			});



			$("body").on("click", ".reset-timer-btn", function () {
				const reqId = $(this).data("req-id");
				const timerSpan = $(this).siblings(".timer-text");

				// 重置进度条
  const progressBar = $(`.progress-bar[data-req-id="${reqId}"]`);
  progressBar.css("width", "0px");

				// 如果计时器正在运行，停止计时器
				if (timers[reqId]) {
					clearInterval(timers[reqId]);
					delete timers[reqId];
					$(this).siblings(".start-timer-btn").html('<i class="far fa-clock"></i>');

				}

				// 清空计时器文本并更新本地存储的数据
				timerSpan.text("");
				requirements[reqId].timerData = "";

				requirements[reqId].progressBarWidth = 0; // 更新需求的进度条宽度数据

				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				// 隐藏“reset-timer-btn”按钮
				$(this).css("display", "none");
				renderRequirements();
				updateStatusSelectOptions();
			});



			// 置顶需求
			$("body").on("click", ".pin-requirement", function () {
				const reqId = $(this).data("req-id");
				const pinnedRequirement = requirements.splice(reqId, 1)[0];
				requirements.push(pinnedRequirement);
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				renderRequirements();
				updateStatusSelectOptions();
			});
// 置底需求
$("body").on("click", ".unpin-requirement", function () {
    const reqId = $(this).data("req-id");
    const pinnedRequirement = requirements.splice(reqId, 1)[0];
    requirements.unshift(pinnedRequirement); // 修改此行
    localStorage.setItem(localStorageKey, JSON.stringify(requirements));
    renderRequirements();
    updateStatusSelectOptions();
});


			//上移（实际下移）
			$("body").on("click", ".move-up-requirement", function () {
				const reqId = $(this).data("req-id");
				if (reqId > 0) {
					const tempRequirement = requirements[reqId - 1];
					requirements[reqId - 1] = requirements[reqId];
					requirements[reqId] = tempRequirement;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
				}
			});
			//下移（实际上移）
			$("body").on("click", ".move-down-requirement", function () {
				const reqId = $(this).data("req-id");
				if (reqId < requirements.length - 1) {
					const tempRequirement = requirements[reqId + 1];
					requirements[reqId + 1] = requirements[reqId];
					requirements[reqId] = tempRequirement;
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
				}
			});


			// 优先级选择
			// 添加事件监听器以处理优先级选择
			$("body").on("click", ".priority-select", function () {
				const reqId = $(this).data("req-id");
				const popup = $(`.priority-select-popup[data-req-id="${reqId}"]`);
				popup.toggle();
			});

			$("body").on("change", ".priority-radio", function () {
				const reqId = $(this).closest(".priority-select-popup").data("req-id");
				const selectedPriority = $(this).val();
				requirements[reqId].priority = selectedPriority;
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				$(`.priority-select[data-req-id="${reqId}"]`).text(selectedPriority);

				// 设置优先级颜色
				let priorityColor;
				switch (selectedPriority) {
					case "P1":
						priorityColor = "red";
						break;
					case "P2":
						priorityColor = "green";
						break;
					case "P3":
						priorityColor = "blue";
						break;
					default:
						priorityColor = "green";
						break;
				}
				$(`.priority-select[data-req-id="${reqId}"]`).css("color", priorityColor);
				$(`.priority-select-popup[data-req-id="${reqId}"]`).hide();

			});

			// 当需求被点击时，关闭其他需求的优先级选择菜单

			$("body").on("click", ".requirements li", function (event) {
				const target = $(event.target);
				if (!target.hasClass("priority-select")) {
					$(".priority-select-popup").hide();
				}
			});
			// 载入时
			function getPriorityColor(priority) {
				switch (priority) {
					case "P1":
						return "red";
					case "P2":
						return "green";
					case "P3":
						return "blue";
					default:
						return "green";
				}
			}


			//开发者
			function createDeveloperOption(developer) {
				const label = document.createElement('label');
				const checkbox = document.createElement('input');
				checkbox.type = 'checkbox';
				checkbox.value = developer.id;
				checkbox.name = 'developers[]';
				label.appendChild(checkbox);
				label.appendChild(document.createTextNode(developer.name));
				return label;
			}
			$("body").on("click", ".developer-select-btn", function () {
				const reqId = $(this).data("req-id");
				const popup = $(`.developer-select-popup[data-req-id="${reqId}"]`);
				popup.toggle();
			});


			$("body").on("click", ".developer-select-confirm", function () {
				const reqId = $(this).data("req-id");
				const popup = $(`.developer-select-popup[data-req-id="${reqId}"]`);
				const selectedDevelopers = popup.find(".developer-checkbox:checked").map(function () {
					return this.value;
				}).get().join(', ');
				requirements[reqId].developers = selectedDevelopers;
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				$(`.developer-select-btn[data-req-id="${reqId}"]`).text(selectedDevelopers || '选择开发人员');
				popup.hide();

				renderRequirements();
				updateStatusSelectOptions();

			});


			function getDeveloperSelections() {
				const developerSelectionsKey = "developer_selections";
				return JSON.parse(localStorage.getItem(developerSelectionsKey)) || {};
			}

			function saveDeveloperSelections(selections) {
				const developerSelectionsKey = "developer_selections";
				localStorage.setItem(developerSelectionsKey, JSON.stringify(selections));

			}
			$(document).on("click", function (event) {
				const popup = $(".developer-select-popup:visible");
				const btn = $(".developer-select-btn:focus");
				const checkbox = popup.find(".developer-checkbox");
				if (popup.length && !popup.is(event.target) && !btn.is(event.target) && !checkbox.is(event.target)) {
					popup.hide();
				}
			});



			// Add event listener for the developer select开发者
			$("body").on("change", ".developer-select", function () {
				const reqId = $(this).data("req-id");
				const selectedDevelopers = $(this).val();
				requirements[reqId].developers = selectedDevelopers;
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
			});

			// 状态
			$("body").on("change", ".status-select", function () {
				const reqId = $(this).data("req-id");
				const newStatus = $(this).val();
				requirements[reqId].status = newStatus;
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				const statusOption = statusOptions.find(option => option.name === newStatus);
				if (statusOption) {
					$(this).css({
						"color": statusOption.color,
						"border-color": statusOption.color
					});
				}
			});
			$("body").on("input", ".color-picker", function () {
				const statusIndex = $(this).data("status-index");
				const newColor = $(this).val();
				statusOptions[statusIndex].color = newColor;
				localStorage.setItem(statusLocalStorageKey, JSON.stringify(statusOptions));
				updateStatusSelectOptions();
			});




			// 复制需求
			function copyToClipboard(text) {
				const tempInput = document.createElement("textarea");
				tempInput.value = text;
				document.body.appendChild(tempInput);
				tempInput.select();
				document.execCommand("copy");
				document.body.removeChild(tempInput);
			}

			$("body").on("click", ".copy-requirement", function () {
				const reqId = $(this).data("req-id");
				let requirementContent = requirements[reqId].content;
				// 替换 <br> 为换行符
				requirementContent = requirementContent.replace(/<br>/g, "\n");
				copyToClipboard(requirementContent);

				const $toast = $("#copy-toast");
				$toast.addClass("active");
				setTimeout(() => {
					$toast.removeClass("active");
				}, 1000);
			});

			// 复制bug
			function copyToClipboard(text) {
				const tempInput = document.createElement("textarea");
				tempInput.value = text;
				document.body.appendChild(tempInput);
				tempInput.select();
				document.execCommand("copy");
				document.body.removeChild(tempInput);
			}

			$("body").on("click", ".copy-bug", function () {
				const reqId = $(this).data("req-id");
				const bugId = $(this).data("bug-id");
				let bugContent = requirements[reqId].bugs[bugId].content;
				// 替换 <br> 为换行符
				bugContent = bugContent.replace(/<br>/g, "\n");
				copyToClipboard(bugContent);

				const $toast = $("#copy-toast");
				$toast.addClass("active");
				setTimeout(() => {
					$toast.removeClass("active");
				}, 1000);
			});



			// 删除 bug
			$("body").on("click", ".delete-bug", function () {
				const reqId = $(this).data("req-id");
				const bugId = $(this).data("bug-id");
				requirements[reqId].bugs.splice(bugId, 1);
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				renderRequirements();
				updateStatusSelectOptions();
			});

			// 删除需求 下拉
			$("body").on("click", ".delete-requirement, .delete-requirement-dropdown", function () {
				const reqId = $(this).data("req-id");
				requirements.splice(reqId, 1);
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				renderRequirements();
				updateStatusSelectOptions();
			});

			// 修改“完成需求”按钮的事件处理函数
			$("body").on("click", ".complete-requirement", function () {
				const reqId = $(this).data("req-id");
				const completedReq = requirements.splice(reqId, 1)[0];
				completedRequirements.push(completedReq);
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
				localStorage.setItem(completedLocalStorageKey, JSON.stringify(completedRequirements));
				renderRequirements();
				updateStatusSelectOptions();
			});

			// 点击已完成需求按钮，弹出已完成需求列表的窗口
			$(".completed-requirements-btn").on("click", function () {
				renderCompletedRequirements();
				showCompletedRequirementsModal();
			});

			// 点击关闭按钮，隐藏已完成需求列表的窗口
			$("#completed-requirements-modal .close").on("click", hideCompletedRequirementsModal);



			function showModal(reqId) {
				$("#bug-modal").data("req-id", reqId).show();
				$("#new-bug").focus();
			}

			function hideModal() {
				$("#bug-modal").hide();
				$("#new-bug").val("");
			}
			// Close bug-modal when clicking outside of the modal-content
			$("#bug-modal").on("click", function (event) {
				if ($(event.target).hasClass("modal")) {
					hideModal();
				}
			});

			function scrollToBottom() {
				const requirementsList = document.getElementById("requirements-list");
				requirementsList.scrollTop = -requirementsList.scrollHeight;
			}

			$("#new-requirement").on("keydown", function (event) {
				$(document).ready(function () {
					adjustHeight(document.getElementById("new-requirement"));
				});
				if (event.key === "Enter" && !event.shiftKey) {
					event.preventDefault();
					const newRequirement = $("#new-requirement").val().trim().replace(/\n/g, "<br>"); // 在这里添加 .replace(/\n/g, "<br>")
					if (newRequirement !== "") {
						const timestamp = new Date().toLocaleString();
						const developerSelections = getDeveloperSelections();
						const reqId = requirements.length;
						developerSelections[reqId] = '';
						saveDeveloperSelections(developerSelections);

						requirements.unshift({ content: newRequirement, timestamp, bugs: [], developers: '', timerData: '' }); // 添加 timerData: '00:00:00'						localStorage.setItem(localStorageKey, JSON.stringify(requirements));
						renderRequirements();
						updateStatusSelectOptions();
						$("#new-requirement").val("");
						scrollToBottom(); // 在这里调用滚动到底部的函数
						$("#new-requirement").attr("rows", 1); // 添加这一行
						adjustHeight(this); // 添加这一行

					}
				}
			});
			$("#new-bug").on("keydown", function (event) {
				if (event.key === "Enter") {
					event.preventDefault();
					if (event.shiftKey) {
						// 换行
						$(this).val($(this).val() + "\n");
					} else {
						// 提交bug
						const reqId = $("#bug-modal").data("req-id");
						const newBug = $("#new-bug").val().trim().replace(/\n/g, "<br>");
						if (newBug !== "") {
							requirements[reqId].bugs.push({ content: newBug, completed: false });
							localStorage.setItem(localStorageKey, JSON.stringify(requirements));
							renderRequirements();
							updateStatusSelectOptions();
							hideModal();
						}
					}
				}
			});


			$("body").on("click", ".new-bug-btn", function () {
				const reqId = $(this).data("req-id");
				showModal(reqId);
			});

			// Submit new bug
			$("#submit-bug").on("click", function () {
				const reqId = $("#bug-modal").data("req-id");
				const newBug = $("#new-bug").val().trim();
				const newBugWithLineBreaks = newBug.replace(/\n/g, '<br>'); // 添加这一行
				if (newBug !== "") {
					requirements[reqId].bugs.push({ content: newBugWithLineBreaks, completed: false }); // 修改这一行
					localStorage.setItem(localStorageKey, JSON.stringify(requirements));
					renderRequirements();
					updateStatusSelectOptions();
					hideModal();
				}
			});



			// Mark bug as completed
			$("body").on("click", ".mark-as-completed", function () {
				const reqId = $(this).data("req-id");
				const bugId = $(this).data("bug-id");
				const bugElement = $(this).siblings("span").not(".bug-label"); // 修改了这里
				bugElement.toggleClass("completed");

				if (requirements[reqId].bugs[bugId].completed) {
					requirements[reqId].bugs[bugId].completed = false;
				} else {
					requirements[reqId].bugs[bugId].completed = true;
				}

				
				localStorage.setItem(localStorageKey, JSON.stringify(requirements));
			});



			$(".close").on("click", hideModal);

			renderRequirements();
			updateStatusSelectOptions();
		}); adjustHeight($("#new-requirement")[0]);






		const logsLocalStorageKey = "logsLocalStorageKey";
		let logs = JSON.parse(localStorage.getItem(logsLocalStorageKey)) || [];

		$("#open-logs-sidebar").on("click", function () {
			$("#logs-sidebar").css("left", "0");
		});

		$("body").on("click", function (event) {
    if (!$(event.target).closest("#logs-sidebar, #open-logs-sidebar").length) {
        $("#logs-sidebar").css("left", "-351px");
    }
});

		function renderLogs() {
			$("#logs-list").empty();
			logs.slice().reverse().forEach((log, index) => {
				addLog(log.text, logs.length - 1 - index, log.timestamp);
			});
		}


		$("#save-log").on("click", function () {
			const newLog = $("#new-log").val().trim();
			if (newLog !== "") {
				const currentDate = new Date();
				const dateString = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月${currentDate.getDate()}日 星期${"日一二三四五六".charAt(currentDate.getDay())}`;

				logs.push({ text: newLog, timestamp: dateString });
				localStorage.setItem(logsLocalStorageKey, JSON.stringify(logs));
				renderLogs();
				$("#new-log").val("");
				$(document).ready(function () {
					adjustHeight(document.getElementById("new-log"));
				});
			}
		});



		$("#new-log").on("input", function () {
			adjustHeight(this);
		});
		renderLogs();

		$(document).ready(function () {
			adjustHeight(document.getElementById("new-log"));
		});

		function openLogsSidebar() {
			document.getElementById('logs-sidebar').style.left = '0';
		}

		function closeLogsSidebar() {
			document.getElementById('logs-sidebar').style.left = '-353px';
		}

		function addLog(text, index, timestamp) {
			const li = document.createElement('li');
			li.id = 'log_' + index;
			li.ondblclick = function () {
				showEditArea(index);
			};

			const timestampContainer = document.createElement('div');
			timestampContainer.className = 'timestamp-container';

			const time = document.createElement('div');
			time.className = 'timestamp-container';
			time.innerText = timestamp;
			timestampContainer.appendChild(time);

			const buttonsContainer = document.createElement('div');

			const copyBtn = document.createElement('button');
			copyBtn.className = 'copyBtn-day';
			copyBtn.innerText = '复制';
			copyBtn.onclick = function () {
				copyLogText(text);
			};
			buttonsContainer.appendChild(copyBtn);

			const deleteBtn = document.createElement('button');
			deleteBtn.className = 'deleteBtn-day';
			deleteBtn.innerText = '删除';
			deleteBtn.onclick = function () {
				deleteLog(index);
			};
			buttonsContainer.appendChild(deleteBtn);

			timestampContainer.appendChild(buttonsContainer);
			li.appendChild(timestampContainer);

			const logText = document.createElement('div');
			logText.className = 'log-text'; // 添加类名
			logText.innerText = text;
			li.appendChild(logText);
			$("#logs-list").append(li);
		}




		function copyLogText(text) {
			const tempInput = document.createElement('textarea');
			tempInput.value = text;
			document.body.appendChild(tempInput);
			tempInput.select();
			document.execCommand('copy');
			document.body.removeChild(tempInput);
			showToast('日志已复制');
		}

		function showToast(message) {
			const toast = document.createElement('div');
			toast.className = 'toast';
			toast.innerText = message;
			document.body.appendChild(toast);

			setTimeout(() => {
				toast.style.opacity = '1';
			}, 100);

			setTimeout(() => {
				toast.style.opacity = '0';
				setTimeout(() => {
					document.body.removeChild(toast);
				}, 300);
			}, 1000);
		}



		function deleteLog(index) {
			logs.splice(index, 1);
			localStorage.setItem(logsLocalStorageKey, JSON.stringify(logs));
			renderLogs();
		}


		function showEditArea(index) {
			const log = document.getElementById('log_' + index);
			const logText = log.getElementsByClassName('log-text')[0];
			const editArea = document.createElement('textarea');
			editArea.addEventListener('input', () => adjustHeight(editArea));
			editArea.className = 'edit-area';
			editArea.rows = '1'; // 将行数更改为1，以便在创建时基于内容调整高度
			editArea.value = logText.innerText;

			const saveBtn = document.createElement('button');
			saveBtn.innerText = '保存';
			saveBtn.onclick = function () {
				updateLog(index, editArea.value);
				editArea.addEventListener('input', () => adjustHeight(editArea));
			};

			logText.innerText = '';
			logText.appendChild(editArea);
			logText.appendChild(saveBtn);
			editArea.style.display = 'block';

			adjustHeight(editArea); // 在创建 editArea 

		}


		function adjustHeight(textarea) {
			textarea.style.height = 'auto';
			textarea.style.height = textarea.scrollHeight + 'px';
		}

		function updateLog(index, newText) {
			logs[index].text = newText; // 更新日志对象的 text 属性
			localStorage.setItem(logsLocalStorageKey, JSON.stringify(logs));
			renderLogs();
		}






	</script>
</body>

</html>